<template>
  <el-input-number :placeholder="$t(placeholder)">
    <template #prefix v-if="prefix">
      <template v-if="typeof prefix === 'object'">
        <Component :is="prefix" />
      </template>
      <span v-else>{{ prefix }}</span>
    </template>
    <template #suffix v-if="suffix">
      <template v-if="typeof suffix === 'object'">
        <Component :is="suffix" />
      </template>
      <span v-else>{{ suffix }}</span>
    </template>
    <template #decrease-icon v-if="typeof decreaseIcon === 'object'">
      <Component :is="decreaseIcon" />
    </template>
    <template #increase-icon v-if="typeof increaseIcon === 'object'">
      <Component :is="increaseIcon" />
    </template>
  </el-input-number>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const props = withDefaults(
  defineProps<{
    placeholder?: string
    prefix?: string | Component
    suffix?: string | Component
    decreaseIcon?: Component
    increaseIcon?: Component
    i18n?: boolean
    i18nPrefix?: string
  }>(),
  {
    placeholder: ''
  }
)

const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text
    ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text)
    : text || t('component.zform.placeholder.input')
}
</script>

<style lang="scss"></style>
